
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title></title>
    <script src="/pratice/vue.global.js"></script>
    <link rel="stylesheet" href="/pratice/css/mains.css">
    <link rel="stylesheet" href="/pratice/css/dynamic.css">
</head>
<body>
    <div id='app'>
        <div class="wrapper">
                <ul class="tabs">
                    <li v-for="(t,index) in tabs" @click="onTabClick(t.name,index)">{{t.text}}</li>
                </ul>
            <div class="content">
                <component :is="currentComponent"></component>
            </div>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data(){
                return {
                    tabs:[
                        {name:"dynamic",text:"动态组件"},
                        {name:"async",text:"异步组件"},
                        {name:"mixin",text:"全局mixin"}
                    ],
                    //当前选中的组件
                    currentComponent:"demo-dynamic",
                    currentIndex:0
                }
            },
            methods:{
                onTabClick(name,index){
                    this.currentComponent='demo-'+name
                    this.currentIndex = index
                }
            },
            computed:{}
        })
        app.mount('#app')
    </script>
    <script src="/pratice/js/dynamic.js"></script>
    <script src="/pratice/js/async.js"></script>
    <script src="/pratice/js/mixin.js"></script>
</body>
</html>